<template>
  <div class="mask">
  <div class="box">
    <div class="p1">
      <div class="line"></div>
      <h2>承建商详情</h2>
      <el-icon @click="close">
        <close-bold />
      </el-icon>
    </div>
    <div>
      <div class="line1-1"></div>
      <span class="p2">企业信息</span>
      <table :model="admin">
        <tr>
          <td class="td" >承建商名称</td>
          <td colspan="3" class="p3">{{ admin.name }}</td>
        </tr>
        <tr>
          <td class="td">企业登记注册类型</td>
          <td class="p3">国有企业</td>
          <td class="td">工商营业执照号</td>
          <td class="p3">124561789+8</td>
        </tr>
        <tr>
          <td class="td">企业营业地址</td>
          <td class="p3">陕西省西安市长安区</td>
          <td class="td">邮政编码</td>
          <td class="p3">701004</td>
        </tr>
        <tr>
          <td class="td">法定代表人</td>
          <td class="p3">{{ admin.daibiao }}</td>
          <td class="td">代表人职务</td>
          <td class="p3">经理</td>
        </tr>
        <tr>
          <td class="td">代表人证件</td>
          <td class="p3">666666666666</td>
          <td class="td">注册资本</td>
          <td class="p3">{{ admin.ziben }}</td>
        </tr>
        <tr>
          <td class="td">注册日期</td>
          <td class="p3">{{ admin.enterdate }}</td>
          <td class="td">成立日期</td>
          <td class="p3">{{ admin.godate }}</td>
        </tr>
      </table>
    </div>
    <div>
      <div class="line1-1"></div>

      <span class="p2">企业联系信息</span>
      <table :model="admin">
        <tr>
          <td class="td">企业联系人</td>
          <td class="p3">王二怪</td>
          <td class="td">企业联系人电话</td>
          <td class="p3">585422502</td>
        </tr>
        <tr>
          <td class="td">企业邮箱</td>
          <td class="p3">-</td>
          <td class="td">企业网站</td>
          <td class="p3">-</td>
        </tr>
      </table>
    </div>
    <div>
      <div class="line1-1"></div>

      <span class="p2">项目信息</span>
      <table :model="admin">
        <tr>
          <td class="td">所属项目</td>
          <td class="p3">XXXX项目1</td>
          <td class="td">承建商性质</td>
          <td class="p3">{{ admin.nature }}</td>
        </tr>
        <tr>
          <td class="td">项目经理</td>
          <td class="p3">{{ admin.jingli }}</td>
          <td class="td">联系手机</td>
          <td class="p3">{{ admin.phone }}</td>
        </tr>
        <tr>
          <td class="td">项目经理证件</td>
          <td class="p3">666666666666</td>
          <td class="td">进场日期</td>
          <td class="p3">{{ admin.enterdate }}</td>
        </tr>
        <tr>
          <td class="td">退场日期</td>
          <td class="p3">{{ admin.godate }}</td>

        </tr>
      </table>
    </div>
    <br>
    <hr />
    <div class="but">
      <el-form-item>

        <el-button @click="close">关闭</el-button>
      </el-form-item>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { CloseBold } from "@element-plus/icons";
import service from "../../../utils/service";
import { reactive, watch } from "vue";

// 声明属性
const props = defineProps<{
  name: string;
}>();
// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();

// 取消
const close = () => {
  // 触发隐藏事件
  emit("hide");
};
interface IAdmin {
  id: string;
  name: string;
  nature: string;
  ziben: string;
  daibiao: string;
  jingli: string;
  phone: string;
  enterdate: string;
  godate: string;
}

// 当前管理员的数据
const admin = reactive<IAdmin>({
  id: "",
  name: "",
  nature: "",
  ziben: "",
  daibiao: "",
  jingli: "",
  phone: "",
  enterdate: "",
  godate: "",
});
//根据name进行获取
const getAdmin = () => {
  service({
    url: "/contractorslist",
    params: {
      name: props.name,
    },
  }).then((res) => {
    admin.name = res.data[0].name;
    admin.nature = res.data[0].nature;
    admin.ziben = res.data[0].ziben;
    admin.daibiao = res.data[0].daibiao;
    admin.jingli = res.data[0].jingli;
    admin.phone = res.data[0].phone;
    admin.enterdate = res.data[0].enterdate;
    admin.godate = res.data[0].godate;
    console.log(res);
  });
};
watch(
  props,
  () => {
    getAdmin();
  },
  {
    deep: true,
  }
);
</script>

<style scoped>
.mask {
 /* 遮罩层的写法 */
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.line {

  position: absolute;
  left: 0px;
  top: 10px;
  width: 5px;
  height: 22px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.line1-1 {
  position: absolute;
  left: 10px;
  top: 2px;
  width: 3px;
  height: 18px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.box {
  width: 900px;
  height: 600px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
  overflow: auto;
}

.el-icon {
  width: 20px;
  height: 20px;
  color: #000;
}

.p1 {
  font-size: 20px;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table {
  width: 800px;
  height: auto;
  border: 1px solid #e4e4e4;
  margin: auto;
}

td {
  width: 200px;
  height: 40px;
  border: 1px solid #e4e4e4;
}

.but {
  margin-top: 10px;
  margin-left: 800px;
}

.td {
  font-size: 14px;
  color: #666666;
  font-weight: 800;
  text-align: center;
}

.p2 {
  display: block;
  font-size: 14px;
  color: #666666;
  font-weight: 800;
  margin-top: 20px;
  margin-left: 20px;


}

h2 {
  font-size: 16px;
  color: #666666;
  font-weight: 800;
  margin-top: 8px;
  margin-left: 16px;

}
.p3{
  font-size: 14px;
  color: #666;
  text-align: center;
  
}
</style>